<template>
    <div class="flex gap-x-4 p-4 cursor-pointer rounded hover:bg-base-200">
        <div class="bbs-avatar">
            <div class="w-16 h-16 rounded-full">
                <img src="https://chat.gxcvucnc.cn/assets/logo-CoUs0I2N.png" alt="avatar">
            </div>
        </div>
        <div class="flex-1">
            <div class="flex w-full justify-start items-center gap-x-10">
                <div class="dark:text-white text-black text-lg">这里是帖子标题</div>
                <div>
                    <a href="#" class="bbs-badge bbs-badge-primary">拓展</a>
                </div>
            </div>
            <div class="text-sm text-gray-500 mt-2 text-ellipsis line-clamp-3">
                这里是帖子内容，内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多内容多多
            </div>
            <div class="mt-2 text-xs text-gray-400">
                <span title="最后回复时间">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-4 h-4 inline-block">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
                    </svg>

                    2023-01-01 12:00:00
                </span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import type { Posts } from './posts'

interface Props {
    posts: Posts
}
const props = defineProps<Props>()
</script>